<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="导入日期" prop="kprq" label-width="70px">
        <el-date-picker
          v-model="importTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                   v-hasPermi="['hr:scscBill:list']">查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-upload
          :style="{'display': 'inline-block','margin-left':'10px'}"
          :on-success="importSuccess"
          :on-error="importError"
          :before-upload="beforeImport"
          :headers="headers"
          :show-file-list="false"
          :multiple="false"
          v-hasPermi="['hr:scscBill:add']"
          :action="action">
          <el-button type="primary" icon="el-icon-upload" size="mini">导入EXCEL</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="scscBillList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="导入人" align="center" prop="createName"/>
      <el-table-column label="导入时间" align="center" prop="createTime"/>
      <el-table-column label="导入数量" align="center" prop="rowCount"/>
      <el-table-column label="费用总金额" align="center" prop="sumExpense"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleView(scope.row)"
            v-hasPermi="['hr:scscBill:remove']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['hr:scscBill:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { delScscBill, listScscBill } from '@/api/hr/scscBill'
  import { getToken } from '@/utils/auth'

  export default {
    name: 'scscBill',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 社保对账单表格数据
        scscBillList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        importTime: [],
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        action: process.env.VUE_APP_BASE_API + '/hr/scscBill/import'
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询社保对账单列表 */
      getList() {
        this.loading = true
        if (this.importTime) {
          this.queryParams.beginTime = this.importTime[0]
          this.queryParams.endTime = this.importTime[1]
        }
        listScscBill(this.queryParams).then(response => {
          this.scscBillList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          importTime: undefined,
          rowCount: undefined,
          sumExpense: undefined,
          createBy: undefined,
          createTime: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.importTime = []
        this.handleQuery()
      },
      /** 查看按钮操作 */
      handleView(row) {
        this.$router.push({
          path: '/scscBillDetail',
          query: {
            pid: row.id
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids
        this.$confirm('是否确认删除该社保对账单数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delScscBill(ids)
        }).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        }).catch(function() {
        })
      },
      //导入前调用
      beforeImport(file) {
        //判断扩展名
        let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (!(extension === 'xls' || extension === 'xlsx')) {
          this.$message({
            message: '上传的文件只能是 xls,xlsx格式!',
            type: 'error'
          })
          return false
        }
        //判断文件大小
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          })
          return false
        }
      },
      //导入成功调用
      importSuccess(response, file, fileList) {
        if (response.code == 200) {
          this.$notify({
            title: '导入文件成功',
            message: response.msg,
            type: 'success'
          })
        } else {
          this.$notify({
            title: '导入文件失败',
            message: response.msg,
            type: 'error'
          })
        }
        this.handleQuery()
      },
      //导入失败调用
      importError(response, file, fileList) {
        this.$notify({
          title: '导入文件失败',
          message: response.msg,
          type: 'error'
        })
      }
    }
  }
</script>
